<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="培训项目信息"></u-navbar>

		<view class="d-p-30">
			<view><text class="d-font-36" style="font-weight: bold;">培训项目</text></view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex" style="color: #5D6672;">
					<view class="d-flex-1 d-flex d-font-28">
						<text class="d-flex-1" style="font-weight: bold;">培训进度</text>
						<text class="d-m-l-20" style="font-weight: bold;color: #162233;">已完成</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-flex d-font-28">
						<text class="d-flex-1" style="font-weight: bold;">参与培训人数</text>
						<text class="d-m-l-20" style="font-weight: bold;color: #162233;">20人</text>
					</view>
				</view>
			</view>

			<view class="d-m-t-30 d-flex">
				<text class="d-font-36 d-flex-1" style="font-weight: bold;">培训结果</text>
				<view class="d-flex d-font-24" style="color: #505355;">
					<text>本次成绩</text>
					<u-icon name="arrow-down" size="24rpx" color="#505355"></u-icon>
				</view>
			</view>

			<view class="card d-m-t-30 d-p-30"><view class="d-font-24 demo">培训结果</view></view>
		</view>
	</view>
</template>

<script>
import { getTrainDetail } from '../../../common/api.js';
export default {
	data() {
		return {
			id: null
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.init();
	},
	methods: {
		init() {
			getTrainDetail({
				params: {
					ywbh: this.id
				}
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.demo {
		width: 630rpx;
		line-height: 512rpx;
		text-align: center;
		background: #f6f7f8;
		opacity: 1;
		border-radius: 0rpx;
		color: #5d6672;
	}
}
</style>
